<template>
  <div class="category-menu-1 w100p flx-am bgc12 mb10">
    <div v-for="(val, key) in category" :key="key">
      <nuxt-link :to="'/category?name='+val.title" class="pt15 pb15 d-block">
        <span class="circle-mix fz24 mb5">
          <i :class="val.icon" class="clr1 " aria-hidden="true"></i>
        </span>
        <span class="clr7">{{val.title}}</span>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        category: {
          classic: {
            title: '豆瓣经典',
            icon: 'fa fa-shopping-bag'
          },
          homelife: {
            title: '家居生活',
            icon: 'fa fa-coffee'
          },
          travel: {
            title: '外出旅行',
            icon: 'fa fa-suitcase'
          },
          stationery: {
            title: '文具小物',
            icon: 'fa fa-book'
          }
        }
      }
    }
  }
</script>

<style lang="stylus">
  .circle-mix
    circle(50px,50px,color10)
</style>
